<template>
	<!-- #ifndef APP-NVUE -->
	<button :hover-start-time="Number(props.hoverStartTime)" :hover-stay-time="Number(props.hoverStayTime)" :form-type="props.formType"
		:open-type="props.openType" :app-parameter="props.appParameter" :hover-stop-propagation="props.hoverStopPropagation"
		:send-message-title="props.sendMessageTitle" :send-message-path="props.sendMessagePath" :lang="props.lang" :data-name="props.dataName"
		:session-from="props.sessionFrom" :send-message-img="props.sendMessageImg" :show-message-card="props.showMessageCard"
		@getphonenumber="getphonenumber" @getuserinfo="getuserinfo" @error="error" @opensetting="opensetting"
		@launchapp="launchapp" :hover-class="hoverClass" class="e-button e-reset-button" :style="buttonStyle"
		@tap="clickHandler" :class="bemClass">
		<template v-if="props.loading">
			<e-loading-icon show :mode="props.loadingMode" :size="props.loadingSize * 1.15" :color="loadingColor"></e-loading-icon>
			<text class="e-button__loading-text"
				:style="[{ fontSize: textSize + 'px' }]">{{ props.loadingText || props.text }}</text>
		</template>
		<template v-else>
			<e-icon v-if="props.icon" :name="props.icon" :color="props.iconColor" :size="textSize * 1.35"
				:customStyle="{ marginRight: '2px' }"></e-icon>
			<slot>
				<text class="e-button__text">{{ props.text }}</text>
			</slot>
		</template>
	</button>
	<!-- #endif -->

	<!-- #ifdef APP-NVUE -->
	<view :hover-start-time="Number(props.hoverStartTime)" :hover-stay-time="Number(props.hoverStayTime)" class="e-button"
		:hover-class="!elDisabled && !props.loading && !props.color && (props.plain || props.type === 'info') ? 'e-button--active--plain' : props.plain ? '' : hoverClass"
		@tap="clickHandler" :class="bemClass" :style="buttonStyle">
		<template v-if="props.loading">
			<e-loading-icon show :mode="props.loadingMode" :size="props.loadingSize * 1.15" :color="loadingColor"></e-loading-icon>
			<text class="e-button__loading-text" :style="[nvueTextStyle]"
				:class="[props.plain && `e-button__text--plain--${props.type}`]">{{ props.loadingText || props.text }}</text>
		</template>
		<template v-else>
			<e-icon v-if="props.icon" :name="props.icon" :color="props.iconColor" :size="textSize * 1.35"></e-icon>
			<text class="e-button__text" :style="[
					{
						marginLeft: props.icon ? '2px' : 0
					},
					nvueTextStyle
				]" :class="[props.plain && `e-button__text--plain--${props.type}`]">
				{{ props.text }}
			</text>
		</template>
	</view>
	<!-- #endif -->
</template>
<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	import mpMixin from '../../libs/mixin/mpMixin'
	/**
	 * button 按钮
	 * @description Button 按钮
	 * @tutorial https://www.uviewui.com/components/button.html
	 *
	 * @property {Boolean}			hairline				是否显示按钮的细边框 (默认 true )
	 * @property {String}			appearance				按钮外观，button（按钮），text（纯文本）
	 * @property {String}			type					按钮的预置样式，info，primary，error，warning，success (默认 'info' )
	 * @value info
	 * @value primary
	 * @value error
	 * @value warning
	 * @value success
	 * @property {String}			size					按钮尺寸，large，normal，small，mini （默认 normal）
	 * @value large
	 * @value normal
	 * @value small
	 * @value mini
	 * @property {String}			shape					按钮形状，circle（两边为半圆），square（带圆角） （默认 'square' ）
	 * @value square
	 * @value circle
	 * @property {Boolean}			plain					按钮是否镂空，背景色透明 （默认 false）
	 * @property {Boolean}			disabled				是否禁用 （默认 false）
	 * @property {Boolean}			loading					按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈) （默认 false）
	 * @property {String | Number}	loadingText				加载中提示文字
	 * @property {String}			loadingMode				加载状态图标类型 （默认 'spinner' ）
	 * @property {String | Number}	loadingSize				加载图标大小 （默认 15 ）
	 * @property {String}			openType				开放能力，具体请看uniapp稳定关于button组件部分说明
	 * @value feedback
	 * @value share
	 * @value getUserInfo
	 * @value contact
	 * @value getPhoneNumber
	 * @value launchApp
	 * @value openSetting
	 * @value chooseAvatar
	 * @value agreePrivacyAuthorization
	 * @value uploadDouyinVideo
	 * @value im
	 * @value getAuthorize
	 * @value lifestyle
	 * @value contactShare
	 * @value openGroupProfile
	 * @value openGuildProfile
	 * @value openPublicProfile
	 * @value shareMessageToFriend
	 * @value addFriend
	 * @value addColorSign
	 * @value addGroupApp
	 * @value addToFavorites
	 * @value chooseAddress
	 * @value chooseInvoiceTitle
	 * @value login
	 * @value subscribe
	 * @value favorite
	 * @value watchLater
	 * @value openProfile
	 * @property {String}			formType				用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
	 * @value submit
	 * @value reset
	 * @property {String}			appParameter			打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效）
	 * @property {Boolean}			hoverStopPropagation	指定是否阻止本节点的祖先节点出现点击态，微信小程序有效（默认 true ）
	 * @property {String}			lang					指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ）
	 * @property {String}			sessionFrom				会话来源，openType="contact"时有效
	 * @property {String}			sendMessageTitle		会话内消息卡片标题，openType="contact"时有效
	 * @property {String}			sendMessagePath			会话内消息卡片点击跳转小程序路径，openType="contact"时有效
	 * @property {String}			sendMessageImg			会话内消息卡片图片，openType="contact"时有效
	 * @property {Boolean}			showMessageCard			是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效（默认false）
	 * @property {String}			dataName				额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
	 * @property {String | Number}	throttleTime			节流，一定时间内只能触发一次 （默认 0 )
	 * @property {String | Number}	hoverStartTime			按住后多久出现点击态，单位毫秒 （默认 0 )
	 * @property {String | Number}	hoverStayTime			手指松开后点击态保留时间，单位毫秒 （默认 200 )
	 * @property {String | Number}	text					按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式）
	 * @property {String}			icon					按钮图标
	 * @property {String}			color					按钮颜色，支持传入linear-gradient渐变色，设置该属性则按钮的type将失效
	 * @property {Object}			customStyle				定义需要用到的外部样式
	 *
	 * @event {Function}	click			非禁止并且非加载中，才能点击
	 * @event {Function}	getphonenumber	open-type="getPhoneNumber"时有效
	 * @event {Function}	getuserinfo		用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
	 * @event {Function}	error			当使用开放能力时，发生错误的回调
	 * @event {Function}	opensetting		在打开授权设置页并关闭后回调
	 * @event {Function}	launchapp		打开 APP 成功的回调
	 * @example <e-button>月落</e-button>
	 */
	export default defineComponent({
		name: 'e-button',
		mixins: [mpMixin]
	})
</script>
<script lang="ts" setup>
	import {
		computed,
		toRefs
	} from 'vue'
	import {
		buttonProps,
		buttonEmits
	} from './props'
	import {
		throttle
	} from '../../libs/utils'
	import {
		addStyle
	} from '../../libs/utils/_utils'
	import {
		useNamespace,
		useDisabled,
		useOpenType,
		openTypeEmits,
		useDefaultProps
	} from '../../libs/hooks'
	import {
		config
	} from '../../libs/config'
	import type {
		StyleProperties
	} from '../../libs/tokens'
	
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";
	
	const {
		button: buttonDefaultProps
	} = toRefs(componentsProps);
	
	const _props = defineProps(buttonProps)
	
	const props = useDefaultProps < DefaultProps['button'] > (_props, buttonDefaultProps);

	const emit = defineEmits({
		...buttonEmits,
		...openTypeEmits
	})
	const {
		m,
		bem_m,
		is
	} = useNamespace('button')
	
	const {
		getphonenumber,
		getuserinfo,
		error,
		opensetting,
		launchapp
	} = useOpenType(emit)


	const elDisabled = useDisabled()
	const bemClass = computed(() => {

		// 由于nvue的原因，在有color参数时，不需要传入type，否则会生成type相关的类型，影响最终的样式
		let classList = bem_m(props.value, props.value.color ? ["shape", "size"] : ["type", "shape", "size"], [
			"plain", "hairline"
		])
		return [is('disabled', elDisabled.value), is('text', props.value!.appearance === 'text')].concat(classList)
	})
	const hoverClass = computed(() => !elDisabled.value && !props.value.loading ? m('active') : '')
	const baseColor = computed(() => {
		let style: StyleProperties = {};
		if (props.value.color) {
			// 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
			style.color = props.value.plain ? props.value.color : "white";
			if (!props.value.plain) {
				// 非镂空，背景色使用自定义的颜色
				style["background-color"] = props.value.color;
			}
			if (props.value.color.indexOf("gradient") !== -1) {
				// 如果自定义的颜色为渐变色，不显示边框，以及通过backgroundImage设置渐变色
				// weex文档说明可以写borderWidth的形式，为什么这里需要分开写？
				// 因为weex是阿里巴巴为了部门业绩考核而做的你懂的东西，所以需要这么写才有效
				style.borderTopWidth = 0;
				style.borderRightWidth = 0;
				style.borderBottomWidth = 0;
				style.borderLeftWidth = 0;
				if (!props.value.plain) {
					style.backgroundImage = props.value.color;
				}
			} else {
				// 非渐变色，则设置边框相关的属性
				style.borderColor = props.value.color;
				style.borderWidth = "1px";
				style.borderStyle = "solid";
			}
		}
		return style;
	})
	const buttonStyle = computed(() => [baseColor.value, addStyle(_props.customStyle)])
	const loadingColor = computed(() => {
		if (props.value.plain) {
			// 如果有设置color值，则用color值，否则使用type主题颜色
			return props.value.color ?
				props.value.color :
				config.color[props.value.type as string];
		}
		if (props.value.type === "info") {
			return "#c9c9c9";
		}
		return "rgb(200, 200, 200)";
	})

	const iconColor = computed(() => {
		// 如果是镂空状态，设置了color就用color值，否则使用主题颜色，
		// e-icon的color能接受一个主题颜色的值
		if (props.value.plain) {
			return props.value.color ? props.value.color : props.value.type;
		} else {
			return "#ffffff";
		}
	})
	// nvue版本按钮的字体不会继承父组件的颜色，需要对每一个text组件进行单独的设置
	const nvueTextStyle = computed(() => {
		let style: StyleProperties = {};
		// 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
		if (props.value.type === "info") {
			style.color = "#323233";
		}
		if (props.value.color) {
			style.color = props.value.plain ? props.value.color : "white";
		}
		return style;
	})

	// 字体大小
	const textSize = computed(() => {
		let fontSize = 14,
			{
				size
			} = props.value;
		if (size === "large") fontSize = 16;
		if (size === "normal") fontSize = 14;
		if (size === "small") fontSize = 12;
		if (size === "mini") fontSize = 10;
		return fontSize;
	})

	const clickHandler = throttle(function() {
		// 非禁止并且非加载中，才能点击
		if (!elDisabled.value && !props.value.loading) {
			// 进行节流控制，每throttleTime毫秒内，只在开始处执行
			emit("click");
		}
	}, Number(props.value.throttleTime))
</script>

<style lang="scss" scoped>
	@import '../../libs/theme/button.scss';
	/* #ifndef APP-NVUE */
	@import '../../libs/theme/button-no-nvue.scss';
	/* #endif */

	/* #ifdef APP-NVUE */
	@import '../../libs/theme/button-nvue.scss';
	/* #endif */
</style>
